<script lang="ts" setup>
import { useDownExcel } from '../useDownExcel';
import history_details from './history_details.vue';
import { useKPIHistoryStore } from '@/store/modules/dcp/assessment_indicators/kpi_history';

// 获取月份呢
const dateList = ref<any[]>([]);
const kpiHistoryStore = useKPIHistoryStore();
const yearMonth = ref<any[]>([]);
const month = ref<string>('');
function getDateList() {
  yearMonth.value = kpiHistoryStore.kpiList;
  for (let i = 0; i < yearMonth.value.length; i++) {
    dateList.value.push({ header: yearMonth.value[i].yearMonth });
  }
}
// 获取根据月份数据
const activeKey = ref([]);
const key = ref<number>(0);
// 根据月份获取数据
const tabsActiveKey = ref<string>('');
// 存储年份和月份信息

// 修改函数以返回年份和月份
// 修改函数以更新 selectedMonth 的值
function convertDateStringToNumber(dateString: string) {
  const regex = /(\d{4})年(\d{2})月/;
  const matches = dateString.match(regex);
  if (matches) {
    const year = matches[1];
    const month = matches[2];
    const formattedDate = year + month;
    // eslint-disable-next-line no-console
    console.log(formattedDate);
    return Number.parseInt(formattedDate, 10);
  }
}

function onChange(keys: any) {
  key.value = keys;
  const date: any = convertDateStringToNumber(dateList.value[keys].header);
  month.value = date;
  // eslint-disable-next-line no-console
  console.log(month.value);
  getData(date);
}
let uniqueSheetNames = new Set<string>();
const uniqueSheetNamesArray = ref<any[]>([]);
async function getData(date: any) {
  uniqueSheetNames = new Set<string>();
  uniqueSheetNamesArray.value = [];
  let alldata: any[] = [];
  await getKpiListByYearMonth(date).then((res: any) => {
    alldata = res.data;
    // 处理数据获取每个项
    alldata.forEach((item) => {
      uniqueSheetNames.add(item.sheetName);
    });
    uniqueSheetNamesArray.value = Array.from(uniqueSheetNames);
    tabsActiveKey.value = uniqueSheetNamesArray.value[0];
  });
}

onMounted(async () => {
  await kpiHistoryStore.getKpiList();
  getDateList();
});
</script>

<template>
  <PubPageMain class="max">
    <div class="header">
      <div class="left">
        <a-space>
          <div class="pjTitle">
            区县月度评价考核-历史记录
          </div>
        </a-space>
      </div>
      <div class="right">
        <a-space>
          <a-button type="primary" @click="$router.push('/assessment_indicators/month')">
            返回
          </a-button>
        </a-space>
      </div>
    </div>
    <div class="content">
      <a-collapse v-model:activeKey="activeKey" accordion :bordered="false" class="m-collapse" @change="onChange">
        <a-collapse-panel v-for="(item, index) in dateList" :key="index" :header="item.header">
          <div style="width: 100%;padding: 10px;background-color: white;">
            <a-tabs v-model:activeKey="tabsActiveKey" tab-position="top">
              <a-tab-pane v-for="(i, index) in uniqueSheetNamesArray" :key="index" :tab="`${i}`">
                <history_details :main-indicator="`${i}`" :date="`${item.header}`" />
              </a-tab-pane>
            </a-tabs>
          </div>
          <template #extra>
            <a-button v-if="month" type="link" @click="useDownExcel().downmonthhistoryexcel(month)">
              导出
            </a-button>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </PubPageMain>
</template>

<style lang="scss" scoped>
.max {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 95%;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 31px;
    margin-bottom: 10px;

    .pjTitle {
      padding-left: 15px;
      background: url("@/assets/images/title-left-bg.svg") no-repeat;
    }

    .right {
      display: flex;
      align-items: center;
    }
  }

  .content {
    height: 100%;
    overflow: auto;

    .m-collapse {
      max-height: 460px;
      overflow-y: auto;
    }
  }
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>
